<script setup lang="ts">
import { ref } from "vue";

import ItemWrap from "@/components/item-wrap";
import LeftTop from "./left-top.vue";
import LeftBottom from "./left-bottom.vue";
import RightBottom from "./right-bottom.vue";
import RightTop from "./right-top.vue";
import CenterTable from "./center-table.vue";
// import CenterMap from "./centerMap.vue";
import CenterMap from "./centerMapVice.vue";
import NavIndex from "./navIndex.vue";
import CenterNavTop from "./center-nav-top.vue";
import NavPage from "@/components/navPage/index.vue";

const handleNavChange = (index: number, item: any) => {
  console.log(index, item);
}

const CenterMapRef = ref<InstanceType<typeof CenterMap>>()
const CenterNavTopRef = ref<InstanceType<typeof CenterNavTop>>()
const LeftBottomRef = ref<InstanceType<typeof LeftBottom>>()
const LeftTopRef = ref<InstanceType<typeof LeftTop>>()
const RightTopRef = ref<InstanceType<typeof RightTop>>()
const RightBottomRef = ref<InstanceType<typeof RightBottom>>()
const CenterTableRef = ref<InstanceType<typeof CenterTable>>()


import { getDataInfo } from "@/api/port";
import { onMounted } from "vue";
const dataInfo = ref<any>({})
onMounted(() => {
  getDataInfo({type: 4}).then((res) => {
    console.log(res);
    dataInfo.value = res.data
    if (LeftTopRef.value) {
        LeftTopRef.value.init(res.data.module1)
    }
    
    if (LeftBottomRef.value) {
        LeftBottomRef.value.init(res.data.module2)
    }

    if (CenterNavTopRef.value) {
        CenterNavTopRef.value.getNavData(res.data.module3)
    }

    if (CenterMapRef.value) {
        CenterMapRef.value.getPointData(res.data.module8)
    }

    if (CenterTableRef.value) {
        CenterTableRef.value.init(res.data.module4)
    }

    
    if (RightTopRef.value) {
        RightTopRef.value.init(res.data.module5)
    }
    if (RightBottomRef.value) {
        RightBottomRef.value.init(res.data.module6)
    }

  });
});
</script>

<template>
    <div class="shared-capacity-box">
        <!-- 左侧区域 -->
        <div class="content_left">
            <ItemWrap class="content_lr-item" title="订单占比图" style="width: 100%;height: 50%;">
                <LeftTop ref="LeftTopRef" />
            </ItemWrap>
            <ItemWrap class="content_lr-item" title="过去24H无人车频次" style="width: 100%;height: 50%;">
                <LeftBottom ref="LeftBottomRef" />

            </ItemWrap>
        </div>

        <!-- 中间区域 -->
        <div class="content_center">
            <CenterNavTop ref="CenterNavTopRef" />

            <CenterMap class="contetn_center_top" ref="CenterMapRef" />
            <CenterTable class="content_center-table" ref="CenterTableRef" />
            <NavPage @nav-change="handleNavChange" :nav-index="4" />
        </div>

        <!-- 右侧区域 -->
        <div class="content_right">
            <ItemWrap class="content_lr-item" title="运行时控" style="width: 100%;height: 50%;">
                <!-- <div class="placeholder-content">
                    <p>车辆保险时间长短分析</p>
                </div> -->
                <RightTop style="width: 100%;height: 100%;" ref="RightTopRef" />

            </ItemWrap>
            <ItemWrap class="content_lr-item" title="车辆状态" style="width: 100%;height: 50%;">
                <RightBottom ref="RightBottomRef" />
            </ItemWrap>
        </div>
    </div>
</template>

<style scoped lang="less">
.shared-capacity-box {
    width: 100%;
    display: flex;
    height: calc(100% - 64px);
    justify-content: space-between;
    gap: 20px;
}

// 左边 右边 结构一样
.content_left,
.content_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 540px;
    box-sizing: border-box;
    height: 100%;
}

.content_center {
    width: calc(100% - 40px - 540px - 540px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .content_center-table {
        height: 240px;
        margin-top: auto;
    }
}

.content_lr-item {
    height: 50%;
}
.contetn_center_top{
    flex: 1;
}

.placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    font-size: 14px;
}
</style>